<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="theme-color" content="#0078E7"><meta name="author" content="CC康纳百川"><meta name="copyright" content="CC康纳百川"><meta name="generator" content="Hexo 5.2.0"><meta name="theme" content="hexo-theme-yun"><title>HEXO折腾 | CC康纳百川</title><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@900&amp;display=swap" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/star-markdown-css@0.1.21/dist/yun/yun-markdown.min.css"><script src="//at.alicdn.com/t/font_1140697_ed8vp4atwoj.js" async></script><script src="https://cdn.jsdelivr.net/npm/scrollreveal/dist/scrollreveal.min.js" defer></script><script>document.addEventListener("DOMContentLoaded", () => {
  [".post-card",".post-content img"].forEach((target)=> {
    ScrollReveal().reveal(target);
  })
});
</script><link rel="shortcut icon" type="image/svg+xml" href="/yun/yun.svg"><link rel="mask-icon" href="/yun/yun.svg" color="#0078E7"><link rel="alternate icon" href="/yun.ico"><link rel="preload" href="/yun/css/hexo-theme-yun.css" as="style"><link rel="preload" href="/yun/js/utils.js" as="script"><link rel="preload" href="/yun/js/hexo-theme-yun.js" as="script"><link rel="prefetch" href="/yun/js/sidebar.js" as="script"><link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin><link rel="stylesheet" href="/yun/css/hexo-theme-yun.css"><script id="yun-config">
    const Yun = window.Yun || {};
    window.CONFIG = {"hostname":"ccknbc.github.io","root":"/yun/","title":"云游君的小站","version":"1.2.0","mode":"time","copycode":true,"anonymous_image":"https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg","say":{"api":"https://v1.hitokoto.cn","hitokoto":true},"local_search":{"path":"/yun/search.xml"},"fireworks":{"colors":["102, 167, 221","62, 131, 225","33, 78, 194"]}};
  </script><script>(function(){
  var bp = document.createElement('script');
  var curProtocol = window.location.protocol.split(':')[0];
  if (curProtocol === 'https') {
    bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
  }
  else {
    bp.src = 'http://push.zhanzhang.baidu.com/push.js';
  }
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(bp, s);
})();</script><meta name="description" content="个人目前使用主题为Butterfly 3.0.1版本，HEXO 5.0.2版本 请按照以下步骤依次安装相应依赖和框架 搭建步骤安装 Node.js 什么是 Node.js ？这得从什么是 JS 说起，JS 也就是 JavaScript。（为什么有种从盘古开天辟地开始的感觉）没错，JavaScript 就是网页的盘古。JavaScript 是一种编程语言，我们所见到的网页中的交互和逻辑处理几乎都是由">
<meta property="og:type" content="article">
<meta property="og:title" content="HEXO折腾">
<meta property="og:url" content="https://ccknbc.github.io/yun/posts/3/">
<meta property="og:site_name" content="CC康纳百川">
<meta property="og:description" content="个人目前使用主题为Butterfly 3.0.1版本，HEXO 5.0.2版本 请按照以下步骤依次安装相应依赖和框架 搭建步骤安装 Node.js 什么是 Node.js ？这得从什么是 JS 说起，JS 也就是 JavaScript。（为什么有种从盘古开天辟地开始的感觉）没错，JavaScript 就是网页的盘古。JavaScript 是一种编程语言，我们所见到的网页中的交互和逻辑处理几乎都是由">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-07-01T00:00:00.000Z">
<meta property="article:modified_time" content="2020-07-01T04:00:00.000Z">
<meta property="article:author" content="CC康纳百川">
<meta property="article:tag" content="HEXO">
<meta name="twitter:card" content="summary"><script src="/yun/js/ui/mode.js"></script></head><body><script defer src="https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js"></script><script defer src="/yun/js/ui/fireworks.js"></script><canvas class="fireworks"></canvas><div class="container"><a class="sidebar-toggle hty-icon-button" id="menu-btn"><div class="hamburger hamburger--spin" type="button"><span class="hamburger-box"><span class="hamburger-inner"></span></span></div></a><div class="sidebar-toggle sidebar-overlay"></div><aside class="sidebar"><script src="/yun/js/sidebar.js"></script><ul class="sidebar-nav"><li class="sidebar-nav-item sidebar-nav-toc hty-icon-button sidebar-nav-active" data-target="post-toc-wrap" title="文章目录"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-list-ordered"></use></svg></li><li class="sidebar-nav-item sidebar-nav-overview hty-icon-button" data-target="site-overview-wrap" title="站点概览"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-passport-line"></use></svg></li></ul><div class="sidebar-panel" id="site-overview-wrap"><div class="site-info mickey-mouse"><a class="site-author-avatar" href="/yun/about/" title="CC康纳百川"><img width="96" loading="lazy" src="/yun/Yun.png" alt="CC康纳百川"><span class="site-author-status" title="永远相信美好的事情即将发生">😊</span></a><div class="site-author-name"><a href="/yun/about/">CC康纳百川</a></div><a class="site-name" href="/yun/about/site">CC康纳百川</a><sub class="site-subtitle">Hello Word</sub><div class="site-desciption">一个无趣的人</div></div><nav class="site-state"><a class="site-state-item hty-icon-button icon-home" href="/yun/" title="首页"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-home-4-line"></use></svg></span></a><div class="site-state-item"><a href="/yun/archives/" title="归档"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-archive-line"></use></svg></span><span class="site-state-item-count">10</span></a></div><div class="site-state-item"><a href="/yun/categories/" title="分类"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-folder-2-line"></use></svg></span><span class="site-state-item-count">16</span></a></div><div class="site-state-item"><a href="/yun/tags/" title="标签"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-price-tag-3-line"></use></svg></span><span class="site-state-item-count">18</span></a></div><a class="site-state-item hty-icon-button" target="_blank" rel="noopener" href="https://yun.yunyoujun.cn" title="文档"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-settings-line"></use></svg></span></a></nav><hr style="margin-bottom:0.5rem"><div class="links-of-author"><a class="links-of-author-item hty-icon-button" rel="noopener" href="/atom.xml" title="RSS" target="_blank" style="color:orange"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-rss-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" href="https://shang.qq.com/wpa/qunwpa?idkey=c929e704022704d8cced9ec355d44a3fa7ad34aea12cef1de03d75d3d7d5b059" title="QQ 群" target="_blank" style="color:#12B7F5"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-qq-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" href="https://github.com/YunYouJun" title="GitHub" target="_blank" style="color:#6e5494"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-github-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" href="https://weibo.com/jizhideyunyoujun" title="微博" target="_blank" style="color:#E6162D"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-weibo-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" href="https://www.douban.com/people/yunyoujun/" title="豆瓣" target="_blank" style="color:#007722"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-douban-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" href="https://music.163.com/#/user/home?id=247102977" title="网易云音乐" target="_blank" style="color:#C20C0C"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-netease-cloud-music-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" href="https://www.zhihu.com/people/yunyoujun/" title="知乎" target="_blank" style="color:#0084FF"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhihu-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" href="https://space.bilibili.com/1579790" title="哔哩哔哩" target="_blank" style="color:#FF8EB3"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-bilibili-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" href="https://twitter.com/YunYouJun" title="Twitter" target="_blank" style="color:#1da1f2"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-twitter-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" href="https://t.me/elpsycn" title="Telegram Channel" target="_blank" style="color:#0088CC"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-telegram-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" href="mailto:me@yunyoujun.cn" title="E-Mail" target="_blank" style="color:#8E71C1"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-mail-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" href="https://travellings.now.sh/" title="Travelling" target="_blank" style="color:var(--hty-text-color)"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-send-plane-2-line"></use></svg></a></div><hr style="margin:0.5rem 1rem"><div class="links"><a class="links-item hty-icon-button" href="/yun/links/" title="我的小伙伴们" style="color:dodgerblue"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-genderless-line"></use></svg></a></div><br><a class="links-item hty-icon-button" id="toggle-mode-btn" href="javascript:;" title="Mode" style="color: #f1cb64"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-contrast-2-line"></use></svg></a></div><div class="sidebar-panel sidebar-panel-active" id="post-toc-wrap"><div class="post-toc"><div class="post-toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%90%AD%E5%BB%BA%E6%AD%A5%E9%AA%A4"><span class="toc-number">1.</span> <span class="toc-text">搭建步骤</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%89%E8%A3%85-Node-js"><span class="toc-number">1.1.</span> <span class="toc-text">安装 Node.js</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Git-%E4%B8%8E-GitHub"><span class="toc-number">1.2.</span> <span class="toc-text">Git 与 GitHub</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AE%89%E8%A3%85-Git"><span class="toc-number">1.2.1.</span> <span class="toc-text">安装 Git</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B3%A8%E5%86%8C-GitHub"><span class="toc-number">1.2.2.</span> <span class="toc-text">注册 GitHub</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%89%E8%A3%85-Hexo"><span class="toc-number">1.3.</span> <span class="toc-text">安装 Hexo</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BB%E9%A2%98%E5%AE%89%E8%A3%9D"><span class="toc-number">1.4.</span> <span class="toc-text">主题安裝</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8-Hexo-%E4%B8%BB%E9%A2%98"><span class="toc-number">1.5.</span> <span class="toc-text">使用 Hexo 主题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Git-%E5%AE%89%E8%A3%85"><span class="toc-number">1.6.</span> <span class="toc-text">Git 安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#npm-%E5%AE%89%E8%A3%85"><span class="toc-number">1.7.</span> <span class="toc-text">npm 安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BA%94%E7%94%A8%E4%B8%BB%E9%A2%98"><span class="toc-number">1.8.</span> <span class="toc-text">应用主题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%94%9F%E6%88%90%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6"><span class="toc-number">1.9.</span> <span class="toc-text">生成静态文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8E%E8%BF%9C%E7%A8%8B%E4%BB%93%E5%BA%93%E5%BB%BA%E7%AB%8B%E5%85%B3%E8%81%94"><span class="toc-number">1.10.</span> <span class="toc-text">与远程仓库建立关联</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%83%A8%E7%BD%B2"><span class="toc-number">1.11.</span> <span class="toc-text">部署</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%87%E4%BB%BD%E4%B8%8E%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2"><span class="toc-number">1.12.</span> <span class="toc-text">备份与自动部署</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%80%E5%A7%8B%E5%86%99%E4%BD%9C"><span class="toc-number">1.13.</span> <span class="toc-text">开始写作</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%96%87%E7%AB%A0"><span class="toc-number">1.13.1.</span> <span class="toc-text">文章</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2"><span class="toc-number">1.13.2.</span> <span class="toc-text">页面</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#FAQ"><span class="toc-number">2.</span> <span class="toc-text">FAQ</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A7%86%E9%A2%91%EF%BC%9F"><span class="toc-number">2.1.</span> <span class="toc-text">视频？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E7%BB%91%E5%AE%9A%E4%BD%A0%E7%9A%84%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9F%9F%E5%90%8D%EF%BC%9F"><span class="toc-number">2.2.</span> <span class="toc-text">如何绑定你的自定义域名？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%87%E6%A1%88"><span class="toc-number">2.3.</span> <span class="toc-text">备案</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%BA%90%E6%96%87%E4%BB%B6%E5%A4%87%E4%BB%BD"><span class="toc-number">3.</span> <span class="toc-text">源文件备份</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%87%E4%BB%BD%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="toc-number">3.1.</span> <span class="toc-text">备份什么？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%87%E4%BB%BD%E6%96%B9%E5%BC%8F"><span class="toc-number">3.2.</span> <span class="toc-text">备份方式</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E4%BC%98%E9%9B%85%E7%9A%84%E9%AD%94%E6%94%B9"><span class="toc-number">4.</span> <span class="toc-text">如何优雅的魔改</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9C%AA%E5%AE%8C%E5%BE%85%E7%BB%AD%E2%80%A6"><span class="toc-number">5.</span> <span class="toc-text">未完待续…</span></a></li></ol></div></div></div></aside><main class="sidebar-translate" id="content"><div id="post"><article class="post-block" itemscope itemtype="https://schema.org/Article"><link itemprop="mainEntityOfPage" href="https://ccknbc.github.io/yun/yun/posts/3/"><span hidden itemprop="author" itemscope itemtype="https://schema.org/Person"><meta itemprop="name" content="CC康纳百川"><meta itemprop="description"></span><span hidden itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><meta itemprop="name" content="CC康纳百川"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">HEXO折腾<a class="post-edit-link" href="https://github.com/ccknbc-actions/blog-yun/blob/master/source/_posts/技术/HEXO折腾.md" target="_blank" title="编辑" rel="noopener"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-edit-line"></use></svg></a></h1><div class="post-meta"><div class="post-time" style="display:block"><span class="post-meta-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-calendar-line"></use></svg></span> <span class="post-meta-icon-text">发表于</span> <time title="创建时间：2020-07-01 08:00:00" itemprop="dateCreated datePublished" datetime="2020-07-01T08:00:00+08:00">2020-07-01</time></div><span class="post-count"><span class="post-symbolcount"><span class="post-meta-item-icon" title="本文字数"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-file-word-line"></use></svg></span> <span title="本文字数">8.5k</span><span class="post-meta-divider">-</span><span class="post-meta-item-icon" title="阅读时长"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-timer-line"></use></svg></span> <span title="阅读时长">35m</span></span></span><span class="post-busuanzi"><span class="post-meta-divider">-</span><span class="post-meta-item-icon" title="阅读次数"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-eye-line"></use></svg> <span id="busuanzi_value_page_pv"></span></span></span><div class="post-classify"><span class="post-category"><span class="post-meta-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-folder-line"></use></svg></span> <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a class="category" href="/yun/categories/HEXO/" style="--text-color:var(--hty-text-color)" itemprop="url" rel="index"><span itemprop="text">HEXO</span></a></span></span><span class="post-tag"><span class="post-meta-divider">-</span><a class="tag" href="/yun/tags/HEXO/" style="--text-color:var(--hty-text-color)"><span class="post-meta-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-price-tag-3-line"></use></svg></span><span class="tag-name">HEXO</span></a></span></div><div class="post-author"><div class="author-avatar"><img src="https://www.gravatar.com/avatar/1928aaddbe6e7107395bf3ac99f35886?s=20&amp;d=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2FYunYouJun%2Fcdn%2Fimg%2Favatar%2Fnone.jpg"></div><span class="author-name">CC</span></div></div></header><section class="post-body" itemprop="articleBody"><div class="post-content markdown-body" style="--smc-primary:#0078E7;"><p><strong>个人目前使用主题为Butterfly <code>3.0.1</code>版本，HEXO <code>5.0.2</code>版本</strong></p>
<p>请按照以下步骤依次安装相应依赖和框架</p>
<h2 id="搭建步骤"><a href="#搭建步骤" class="headerlink" title="搭建步骤"></a>搭建步骤</h2><h3 id="安装-Node-js"><a href="#安装-Node-js" class="headerlink" title="安装 Node.js"></a>安装 Node.js</h3><blockquote>
<p><strong>什么是 Node.js ？</strong><br>这得从什么是 JS 说起，JS 也就是 JavaScript。（为什么有种从盘古开天辟地开始的感觉）没错，JavaScript 就是网页的盘古。JavaScript 是一种编程语言，我们所见到的网页中的交互和逻辑处理几乎都是由 JavaScript 完成。<br>JavaScript 语法简单，易学易用。（当然也请不要小瞧它，虽然它入门门槛低，但上限同样也很高。包括但不限于实现网站前后端，手机桌面应用程序，机器学习，计算机图形学等。）<br>在 Node.js 诞生前，JavaScript 都运行于浏览器端。也就是说，它是鱼，浏览器是装满了水的水缸。<br>2008 年，Chrome V8 诞生。2009 年，Node.js 诞生。并成为 GitHub 早期最著名的开源项目。GitHub 可能大家已有所了解，后续再说。<br>Node.js 便是一个基于 Chrome V8 引擎的 JavaScript 运行环境。（当年第一次看到这句话时，我也一脸懵逼。）按照我的理解，JavaScript 是鱼，Chrome V8 就是抽水机，Node.js 则把这台抽水机也装在你电脑上。于是你的电脑也有了 Node.js 这个和浏览器相似的水缸，也可以在里面运行 JavaScript 了！<br>当然 Node.js 和浏览器端还是因为自身定位和一些历史原因而有些许区别的，不再展开。<br><a target="_blank" rel="noopener" href="https://baike.baidu.com/item/node.js/7567977">Node.js | 百度百科</a><br><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript">JavaScript | MDN</a></p>
</blockquote>
<p><a target="_blank" rel="noopener" href="https://nodejs.org/zh-cn/">下载｜ Node.js</a></p>
<p>建议下载<strong>长期支持版</strong>而非<strong>当前发布版</strong>（因为如果是最新版，容易出现一些奇妙的 bug）。</p>
<p>全部默认下一步进行安装。</p>
<p>Windows 打开命令提示符，macOS 打开终端。（= =，这个不会就请百度吧。）<br>Linux 用户右上角关闭本标签页。</p>
<p>后续如提到输入命令，均默认指打开终端进行输入。</p>
<p>输入 <code>node --version</code>，如果得到的版本号与你方才安装的一致，那么 Node.js 就已经成功安装。</p>
<blockquote>
<p>Node.js 安装成功时也默认安装了 <code>npm</code>，在此后将会用到。<br><code>npm</code> 是随 Node.js 一起被安装的包管理工具，你可以理解成 Node.js 自带的应用商店。</p>
</blockquote>
<p>对了，国内使用 npm 可能很慢。</p>
<p><strong>你可以考虑切换为 <code>taobao</code> 镜像源。</strong></p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">npm config <span class="built_in">set</span> registry https://registry.npm.taobao.org</span><br></pre></td></tr></table></figure>

<blockquote>
<p><a target="_blank" rel="noopener" href="https://www.yuque.com/yunyoujun/notes/npm-and-yarn#nrm">npm &amp; yarn 常用包与命令</a></p>
</blockquote>
<h3 id="Git-与-GitHub"><a href="#Git-与-GitHub" class="headerlink" title="Git 与 GitHub"></a>Git 与 GitHub</h3><h4 id="安装-Git"><a href="#安装-Git" class="headerlink" title="安装 Git"></a>安装 Git</h4><blockquote>
<p>Visual Studio Code，简称 VS Code。<br>目前最为强大易用的编辑器，轻量且快速。（<del>宇宙第一编辑器</del>）<br>注意：它并不是我们常常听到的 VS，VS 常常指的是 Visual Studio，是一个功能强大的 IDE（集成开发环境），体积也相比 VS Code 都要大上一个量级。</p>
</blockquote>
<p>在此之前，我建议你先安装 <a target="_blank" rel="noopener" href="https://code.visualstudio.com/">VS Code</a>。因为安装 Git Bash 时，可以设置 VS Code 作为默认编辑器。</p>
<blockquote>
<p>Git 是一个开源的分布式版本控制系统，由 Linus Torvalds（同时也是 Linux 的作者）为了管理 Linux 开发而开发。<br>简而言之，是一个版本管理工具。譬如设计师设计好了第三版的海报，客户却说还是要第一版吧，这时便可以通过 Git 快速回退到最初的版本。<br>你只需要把每次更改的状态（Git 会自动进行检测，你只要掌握基础的几条命令就可以了）告诉 Git，而不需要每个版本都保存一份压缩包，既方便也能大大节约空间。<br>（当然这主要只对代码文本起作用，因为 Git 的本质是记录各行代码的增减，倘若是像视频、海报这类二进制文件来说便体现不出丝毫优势了。当然想要应对这种场景还有 <a target="_blank" rel="noopener" href="https://git-lfs.github.com/">Git LFS</a>。）</p>
</blockquote>
<p>下载 <a target="_blank" rel="noopener" href="https://git-scm.com/">Git</a> 并安装（如果国内速度太慢，可以试试<a target="_blank" rel="noopener" href="https://pc.qq.com/detail/13/detail_22693.html">这里</a>）</p>
<p>macOS 用户可以下载官网的安装包进行安装，也可以直接安装 App Store 的 Xcode（附带会安装 Git，但是比较大）。</p>
<blockquote>
<p>类似的工具还有：SVN。但始终更推荐 Git，因为它功能更为强大且它的背后还有更强大的生态：GitHub。</p>
</blockquote>
<h4 id="注册-GitHub"><a href="#注册-GitHub" class="headerlink" title="注册 GitHub"></a>注册 GitHub</h4><p>这一部分内容，你也可以放到本地调试并预览成功后并打算线上部署的时候，再回过头来看。</p>
<blockquote>
<p>GitHub 一听便与 Git 有所渊源。<code>Git</code> 在英文中是懒人、饭桶之意。<code>Hub</code> 则是中心、集线器的意思。譬如 USB 集线器就是 USB Hub。所以 GitHub 就是饭桶中心（<del>大雾</del>）。<br>GitHub 是全世界最大的开源项目与代码托管平台，也是众多开发者的交流场所。<del>还是全球最大的同性交友网站</del>。<br>而代码托管本身用到的正是上文提到的 Git 技术。</p>
</blockquote>
<p>注册 <a target="_blank" rel="noopener" href="https://github.com/">GitHub</a> 账号。（虽然都是英文，但不必畏惧，也并不会造成使用障碍，只要记得最常用的选项含义即可，以及善用手头的翻译软件。）</p>
<blockquote>
<p>注意：注册时的英文用户名将成为你可以使用的免费域名前缀。</p>
</blockquote>
<p>登录 GitHub。</p>
<blockquote>
<p>为什么要用 GitHub？<br>对于平民玩家来说，在初次尝试建立自己的网站时，也许并不会有闲钱或者说决心来购买自己的服务器与域名。<br>而 GitHub 则提供了 <a target="_blank" rel="noopener" href="https://pages.github.com/">GitHub Pages</a> 这一服务。<br>用户们可以利用这一服务，部署自己的静态站点。</p>
</blockquote>
<p>点击右上角的 <code>+</code> -&gt; <code>New repository</code> 新建仓库。</p>
<p>仓库名称务必为 <code>你的用户名.github.io</code>，用户名是英文，大小写无所谓，但建议统一小写。（因为你会发现时常切换大小写很麻烦）</p>
<blockquote>
<p>为什么必须这个作为仓库名？<br>GitHub Pages 服务的命名规范，同时若您没有自己的域名，使用Github提供的服务的话，请务必将此仓库设为公开，同时它也将成为你的专属域名。当然，你也可以购置自己的专属域名并用它来提供内容。</p>
</blockquote>
<p>点击 <code>Create repository</code>。</p>
<h3 id="安装-Hexo"><a href="#安装-Hexo" class="headerlink" title="安装 Hexo"></a>安装 Hexo</h3><p><a target="_blank" rel="noopener" href="https://hexo.io/">Hexo</a></p>
<ul>
<li>GitHub: <a target="_blank" rel="noopener" href="https://github.com/hexojs/hexo">https://github.com/hexojs/hexo</a></li>
<li><a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/docs/index.html">官方文档</a>（直接参考文档也是一个不错的选择）</li>
</ul>
<blockquote>
<p><strong>为嘛使用 Hexo ？</strong><br>Hexo 是一个快速、简洁而强大的博客框架，基于 Node.js，同样托管于 GitHub 之上。生态中拥有众多插件主题。你可以基于它快速生成一些静态页面。<br>你可以使用别人的各种主题与插件，也可以自己定制开发想要的功能。<br><strong>为什么不是…?</strong><br>其他常用的博客框架还有 <a target="_blank" rel="noopener" href="https://wordpress.org/">WordPress</a>，<a target="_blank" rel="noopener" href="https://typecho.org/">Typecho</a>，<a target="_blank" rel="noopener" href="https://ghost.org/">Ghost</a> 等，但这些往往都需要购置自己的服务器，而无法静态化地部署到 GitHub Pages 上。（当然，相应的功能和灵活性也大大提升。）静态化站点还有一个优势就是访问速度往往更快。<br>静态网站生成器还有 <a target="_blank" rel="noopener" href="https://vuepress.vuejs.org/">Vuepress</a>，<a target="_blank" rel="noopener" href="https://www.gatsbyjs.org/">Gatsby</a> 等。但这些多是为了写文档而量身定制的，你也可以使用它们，但是相较 Hexo 的博客定位，它们关于博客的插件和主题以及解决办法会少得多。<br>Hexo 提供的功能与 <a target="_blank" rel="noopener" href="https://gohugo.io/">Hugo</a> 几乎都有，（生成大量文件时，甚至比 Hexo 更快）不过它是基于 GO 语言。日后你想对自己的网站进行自定义，即便是 Hugo，你编写前端的交互仍旧需要使用 JavaScript，所以选择基于 JavaScript 的 Hexo 可以降低学习成本。（你若对 GO 有兴趣，仍然可以尝试使用 Hugo，但本教程将不会针对 Hugo 进行展开。）<br>所以对于新手来说，使用 Hexo 作为起始点，不失为一个好选择。（当然如果你有钱租服务器，并希望快速上手的话，就可以考虑考虑 WordPress 或者 Typecho）<br>这里顺带推荐一下小伙伴 <a target="_blank" rel="noopener" href="https://asuhe.jp/">染川瞳</a> 的 WordPress 主题 <a target="_blank" rel="noopener" href="https://github.com/mirai-mamori/Sakurairo">Sakurairo</a>，<a target="_blank" rel="noopener" href="https://guhub.cn/">阔落</a> 的 Typecho 主题 <a target="_blank" rel="noopener" href="https://github.com/BigCoke233/miracles">miracles</a>，都是很漂亮的主题。</p>
</blockquote>
<p>在终端中输入以下命令：</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">npm install hexo-cli -g</span><br><span class="line"><span class="comment"># 如果安装失败，可能是没有权限，可以尝试头部加上 sudo 重新执行</span></span><br><span class="line"><span class="comment"># sudo npm install hexo-cli -g</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p><code>install</code> 自然是安装。<br><code>hexo-cli</code> 则是 <code>hexo</code> 的终端工具，可以帮助你生成一些模版文件，之后再用到。<br><code>-g</code> 代表的是全局安装。也就是在任何地方都可以使用，否则会只能在安装的目录下使用。</p>
</blockquote>
<p>此时，请先通过 <code>cd</code> 进入你本地电脑打算存储网站代码的文件夹目录。（或者右键文件夹 Git Bash Here）</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://baike.baidu.com/item/cd/3516393">cd | DOS 命令</a><br><a target="_blank" rel="noopener" href="https://baike.baidu.com/item/cd/3516411">cd （LINUXSHELL 命令）</a></p>
</blockquote>
<p>譬如：</p>
<blockquote>
<p>注意：这里是你自定义的目录，请不要复制粘贴</p>
</blockquote>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line"><span class="comment"># &#x27;#&#x27; 字符后的文字代表注释，不需要输入</span></span><br><span class="line"><span class="comment"># Windows</span></span><br><span class="line"><span class="built_in">cd</span> C:\Users\CCKNBC\Documents\GitHub\</span><br><span class="line"><span class="comment">#实际上我用的是D:blog目录,按需选择即可</span></span><br><span class="line"><span class="comment"># macOS</span></span><br><span class="line"><span class="comment"># cd /Users/yunyou/github/</span></span><br></pre></td></tr></table></figure>

<p>接下来输入：</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">hexo init 你的名字.github.io</span><br></pre></td></tr></table></figure>

<blockquote>
<p><code>hexo</code> 正是因为我们之前安装了 <code>hexo-cli</code> 这一个包，所以我们可以在终端中使用 <code>hexo</code> 这一命令。<br><code>init</code> 初始化博客的模版文件。后面跟的是你要新建的文件夹，最好和你此前新建的仓库名一致。</p>
</blockquote>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 进入你的博客文件夹</span></span><br><span class="line"><span class="built_in">cd</span> 你的名字.github.io</span><br><span class="line"><span class="comment"># 默认安装所有 `package.json` 文件中提到的包</span></span><br><span class="line">npm install</span><br><span class="line"><span class="comment"># 你也可以缩写成 hexo s</span></span><br><span class="line">hexo server</span><br></pre></td></tr></table></figure>

<p><code>server</code> 代表开启本地的 Hexo 服务器，这时你就可以打开浏览器，在地址栏中输入 <code>localhost:4000</code> 就可以看到本地的网页了。</p>
<p>按 <code>Ctrl + C</code> 中断服务器的运行。</p>
<p>至此，基础的模版页面便已经搭建好了。</p>
<h3 id="主题安裝"><a href="#主题安裝" class="headerlink" title="主题安裝"></a>主题安裝</h3><h3 id="使用-Hexo-主题"><a href="#使用-Hexo-主题" class="headerlink" title="使用 Hexo 主题"></a>使用 Hexo 主题</h3><p>Hexo 默认提供的是 <a target="_blank" rel="noopener" href="https://github.com/hexojs/hexo-theme-landscape">hexo-theme-landscape</a> 主题。<br>默认主题样式简单，功能较少。所以大多数人并不会使用默认主题。</p>
<h3 id="Git-安装"><a href="#Git-安装" class="headerlink" title="Git 安装"></a>Git 安装</h3><p>在博客根目录里安装稳定版<code>master</code>分支【推荐】</p>
<figure class="highlight powershell"><table><tr><td class="code"><pre><span class="line">git clone <span class="literal">-b</span> master https://github.com/jerryc127/hexo<span class="literal">-theme</span><span class="literal">-butterfly</span>.git themes/butterfly</span><br></pre></td></tr></table></figure>

<p>如果想要安装比较新的<code>dev</code>分支，可以</p>
<figure class="highlight powershell"><table><tr><td class="code"><pre><span class="line">git clone <span class="literal">-b</span> dev https://github.com/jerryc127/hexo<span class="literal">-theme</span><span class="literal">-butterfly</span>.git themes/butterfly</span><br></pre></td></tr></table></figure>

<h3 id="npm-安装"><a href="#npm-安装" class="headerlink" title="npm 安装"></a>npm 安装</h3><blockquote>
<p>此方法只支持<code>Hexo 5.0.0</code>以上版本</p>
</blockquote>
<p>在博客根目录里</p>
<figure class="highlight powershell"><table><tr><td class="code"><pre><span class="line">npm i hexo<span class="literal">-theme</span><span class="literal">-butterfly</span></span><br></pre></td></tr></table></figure>

<h3 id="应用主题"><a href="#应用主题" class="headerlink" title="应用主题"></a>应用主题</h3><p>修改hexo配置文件<code>_config.yml</code>（根目录），把主题改为<code>Butterfly</code>（注意配置要和你的主题文件夹名大小写完全一致哦）</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">theme: butterfly</span><br></pre></td></tr></table></figure>

<blockquote>
<p>如果你沒有<code>pug</code>以及<code>stylus</code>的渲染器，请下载安装： </p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">npm install hexo-renderer-pug hexo-renderer-stylus --save</span><br></pre></td></tr></table></figure>

<blockquote>
<p>在进行配置修改之前，为了以后主题通过git pull平滑升级，请不要随意改动主题源码，虽然你可以通过强制合并来解决，但保险点总是没错的，并且由于主题的**<code>约定&gt;配置</code><strong>特性，因此我们通常在Hexo根目录</strong><code>sorce/_data</code><strong>下把主题的</strong><code>_config.yml</code><strong>（主题目录）复制过来，并且重命名为</strong><code>butterfly.yml</code>**，然后再对butterfly.yml进行修改即可</p>
</blockquote>
<p>有了上面的基础，我们就可以根据对应的**<a target="_blank" rel="noopener" href="https://demo.jerryc.me/">文档</a>**修改相应的配置了,以下不再赘述</p>
<h3 id="生成静态文件"><a href="#生成静态文件" class="headerlink" title="生成静态文件"></a>生成静态文件</h3><p>至今我们的工作都是在本地进行，想必你也很想放到线上与小伙伴们分享。<br>这便轮到了 GitHub Pages 的出场，不过 GitHub Pages 只支持纯静态文件。</p>
<p>所以我们需要使用以下命令先来生成站点的静态文件。</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 如果进行多次生成，为了避免受错误缓存影响，最好使用 hexo clean 先清除一遍。</span></span><br><span class="line">hexo generate</span><br><span class="line"><span class="comment"># 缩写为 hexo g</span></span><br></pre></td></tr></table></figure>

<p>此时你的文件夹目录下会出现 <code>public</code> 这个文件夹，里面存放的就是你站点的静态文件。</p>
<h3 id="与远程仓库建立关联"><a href="#与远程仓库建立关联" class="headerlink" title="与远程仓库建立关联"></a>与远程仓库建立关联</h3><p>接下来我们将本地的仓库与此前在 GitHub 上建立的仓库建立关联。</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">git init <span class="comment"># 初始化 Git 仓库，只需要执行一次即可</span></span><br></pre></td></tr></table></figure>

<p>在将其部署到 GitHub Pages 上之前，我们最好先建立一个分支。</p>
<blockquote>
<p>什么是分支？<br>Git 提供了版本管理功能，其中还有一个分支功能，你现在可以简单地将其理解为平行世界。</p>
</blockquote>
<p><code>你的名字.github.io</code> 部署后，GitHub Pages 将默认使用你的 master 分支作为静态文件部署。<br>所以我们最好新建一个 hexo 分支（命名无所谓）用来存储 Hexo 地源代码，master 分支则用来存储部署后的静态文件。</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">git checkout -b hexo</span><br></pre></td></tr></table></figure>

<p>这时便成功建立了一个 hexo 分支。（此后的工作都将在 hexo 分支下进行）</p>
<p>你可以通过 <code>git branch -v</code> 来查看当前有哪些分支，使用 <code>git branch 分支名</code> 来切换到对应的分支。</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://www.yunyoujun.cn/note/git-learn-note/">Git 学习笔记</a></p>
</blockquote>
<h3 id="部署"><a href="#部署" class="headerlink" title="部署"></a>部署</h3><p>为了更方便的部署到 GitHub Pages，Hexo 提供了 <code>hexo-deployer-git</code> 插件。</p>
<p>老规矩，安装。</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">npm install hexo-deployer-git</span><br></pre></td></tr></table></figure>

<p>在 <code>_config.yml</code> 中配置。</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">deploy:</span></span><br><span class="line">  <span class="attr">type:</span> <span class="string">git</span></span><br><span class="line">  <span class="attr">repo:</span> <span class="string">你此前新建的仓库的链接</span> <span class="comment"># 比如：https://github.com/YunYouJun/yunyoujun.github.io</span></span><br><span class="line">  <span class="attr">branch:</span> <span class="string">master</span> <span class="comment"># 默认使用 master 分支</span></span><br><span class="line">  <span class="attr">message:</span> <span class="string">Update</span> <span class="string">Hexo</span> <span class="string">Static</span> <span class="string">Content</span> <span class="comment"># 你可以自定义此次部署更新的说明</span></span><br></pre></td></tr></table></figure>

<p>保存，部署！</p>
<blockquote>
<p>第一次可能需要你输入用户名与密码。<br>密码输入的时候不会出现 ***，不要害怕，已经输入进去了。</p>
</blockquote>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">hexo deploy</span><br></pre></td></tr></table></figure>

<p>等待完成后，打开网址 <code>https://你的名字.github.io</code> 就能看到你的线上网站了。</p>
<blockquote>
<p>使用 https，http 可能无法正常打开。HTTPS 是多了安全加密的 HTTP，Chrome 浏览器已经默认会显示 <code>http</code> 链接为不安全。<br>为了安全，建议开启强制 https 跳转。<code>项目地址页面 -&gt; Settings -&gt; Options -&gt; GitHub Pages -&gt; Enforce HTTPS</code>。（翻到下面）<br>此时，http 网址会自动重定向到 https</p>
</blockquote>
<h3 id="备份与自动部署"><a href="#备份与自动部署" class="headerlink" title="备份与自动部署"></a>备份与自动部署</h3><p>我们当前只是将生成的静态文件部署到了云端。</p>
<p>为了以防万一，我们应该将网站的源代码文件也推送到 GitHub 仓库备份。</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 与远程 Git 仓库建立连接，只此一次即可</span></span><br><span class="line">git remote add origin https://github.com/你的用户名/你的名字.github.io</span><br></pre></td></tr></table></figure>

<p>接下来准备提交，这几句命令将是你以后每次备份所需要输入。</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 添加到缓存区</span></span><br><span class="line">git add -A</span><br><span class="line">git commit -m <span class="string">&quot;这次做了什么更改，简单描述下即可&quot;</span></span><br><span class="line"><span class="comment"># 推送至远程仓库</span></span><br><span class="line">git push</span><br><span class="line"><span class="comment"># 第一次提交，你可能需设置一下默认提交分支</span></span><br><span class="line"><span class="comment"># git push --set-upstream origin hexo</span></span><br></pre></td></tr></table></figure>

<p>每次推送都要输入这三条命令，你可能觉得有些麻烦。<br>那么你可以编写 bash 脚本。</p>
<p>譬如，在根目录下新建 <code>update.sh</code>。</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 如果没有消息后缀，默认提交信息为 `:pencil: update content`</span></span><br><span class="line">info=<span class="variable">$1</span></span><br><span class="line"><span class="keyword">if</span> [<span class="string">&quot;<span class="variable">$info</span>&quot;</span> = <span class="string">&quot;&quot;</span>];</span><br><span class="line"><span class="keyword">then</span> info=<span class="string">&quot;:pencil: update content&quot;</span></span><br><span class="line"><span class="keyword">fi</span></span><br><span class="line">git add -A</span><br><span class="line">git commit -m <span class="string">&quot;<span class="variable">$info</span>&quot;</span></span><br><span class="line">git push origin hexo</span><br></pre></td></tr></table></figure>

<p>此后更新的话，只需要在终端执行 <code>sh update.sh</code> 即可。</p>
<p>更新麻烦，每次部署也很麻烦，可以使用持续集成进行自动部署。</p>
<blockquote>
<p>什么是持续集成？<br>持续集成是一种软件开发实践。对软件进行自动化构建，以此来发现错误。<br>Travis CI 就是一个线上持续集成服务的提供商。它可以拉取你每次推送到 GitHub 上的代码，然后根据你的要求对其进行构建。<br>我们可以趁机让它自动生成网站静态文件，然后自动帮我们部署。<br>除此之外，你还可以使用 <a target="_blank" rel="noopener" href="https://help.github.com/en/actions/getting-started-with-github-actions/about-github-actions">GitHub Actions</a> ，<a target="_blank" rel="noopener" href="https://www.netlify.com/">Netlify</a> 等服务。<br>GitHub Actions 相比 Travis 等，自身便拥有仓库的 Token，不再需要额外设置，可以直接使用 <code>secrets.GITHUB_TOKEN</code>。<br>推荐一个专门用来部署 gh-pages 的 Actions <a target="_blank" rel="noopener" href="https://github.com/peaceiris/actions-gh-pages">actions-gh-pages</a></p>
</blockquote>
<p>关于更多更具体的自动化部署方案和操作步骤，你可以参考我的小伙伴 ChrAlpha 的 <a target="_blank" rel="noopener" href="https://blog.ichr.me/post/automated-deployment-of-serverless-static-blog/">初探无后端静态博客自动化部署方案</a>。</p>
<p>他在文章中详细介绍了 Netlify 、GitHub Actions 和 Travis CI 的部署方法。</p>
<p>你也可以参考 Hexo 的官方文档 <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/docs/github-pages">将 Hexo 部署到 GitHub Pages</a></p>
<p>我就不在此画蛇添足。</p>
<hr>
<p>当然还有个更简便的方法，直接参考我的 <a target="_blank" rel="noopener" href="https://github.com/YunYouJun/yunyoujun.github.io/blob/hexo/.github/workflows/gh-pages.yml">gh-pages.yml</a>。</p>
<p>去掉夹在 <code>yarn install</code> 与 <code>yarn build</code> 之间的 <code>algolia</code> 部分，直接粘贴到你的 <code>.github/workflows/</code> 文件夹（自己新建）下 <code>xxx.yml</code> 文件里即可。</p>
<p>推送后便可直接自动部署。</p>
<p>至此，你的站点便基本搭建完成，此后继续对主题进行自定义吧。</p>
<h3 id="开始写作"><a href="#开始写作" class="headerlink" title="开始写作"></a>开始写作</h3><h4 id="文章"><a href="#文章" class="headerlink" title="文章"></a>文章</h4><p>输入以下命令即可新建 <code>xxx.md</code> 文件。</p>
<figure class="highlight sh"><table><tr><td class="code"><pre><span class="line">hexo new post xxx</span><br></pre></td></tr></table></figure>

<blockquote>
<p><code>md</code> 是 <code>Markdown</code> 的后缀名，是一种简洁方便的文本标记语言。你只需要记住简单的几种语法，就可以快速进行编写。<br>为什么使用 Markdown？<br>首先 Hexo 本身就是将 Markdown 转化为静态的 Html 文件，来方便用户编写文章。<br>Markdown 就好似介于 Word 与 TXT 文本之间。Word 体积大、大部分功能实际上根本用不到，且最后的文档常常带有许多冗余信息。<br>而 TXT 却无法实现加粗、标题、下划线、水平分割线等常用的功能。<br>（这里所说的 TXT 只是一种纯文本格式的代称，实际上 Markdown 也是纯文本文件，不过通过语法和 Markdown 编译器，我们就可以看到一些简单的样式。）</p>
</blockquote>
<p>譬如本文就是通过 Markdown 编写。</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line"><span class="section"># 一级标题</span></span><br><span class="line"></span><br><span class="line"><span class="section">## 二级标题</span></span><br><span class="line"></span><br><span class="line"><span class="strong">**加粗文字**</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>更多语法（虽然说是更多，但是其实也没多少）：<a target="_blank" rel="noopener" href="https://github.com/younghz/Markdown">Markdown 基本语法</a></p>
</blockquote>
<p>这是我写的一个 Markdown 样式：<a target="_blank" rel="noopener" href="https://www.yunyoujun.cn/star-markdown-css/">star-markdown-css</a></p>
<p>上面是渲染过后的效果，你可以与其 Markdown 的<a target="_blank" rel="noopener" href="https://raw.githubusercontent.com/YunYouJun/star-markdown-css/master/demo/md/demo.md">纯文本原文</a>进行对比。</p>
<h4 id="页面"><a href="#页面" class="headerlink" title="页面"></a>页面</h4><p>你可以新建一些自己的自定义页面。</p>
<p>譬如直接在 Hexo 目录下的 <code>source</code> 文件夹下直接新建 HTML 进行编写。</p>
<p>也可以通过以下命令来新建页面。（当然还是 Markdown，不过也是可以在 Markdown 里写 HTML 的，也会被渲染出来。）</p>
<figure class="highlight md"><table><tr><td class="code"><pre><span class="line">hexo new page xxx</span><br></pre></td></tr></table></figure>

<blockquote>
<p>至于对应的参数配置，请参考主题文档</p>
</blockquote>
<h2 id="FAQ"><a href="#FAQ" class="headerlink" title="FAQ"></a>FAQ</h2><h3 id="视频？"><a href="#视频？" class="headerlink" title="视频？"></a>视频？</h3><p>没有视频，一是懒，二是文字更利于更新勘误。</p>
<p>以及文章中将会频繁出现参考链接，更方便使用。</p>
<h3 id="如何绑定你的自定义域名？"><a href="#如何绑定你的自定义域名？" class="headerlink" title="如何绑定你的自定义域名？"></a>如何绑定你的自定义域名？</h3><p>首先，你得有个自己的域名。</p>
<blockquote>
<p>避免广告嫌疑，你可以自行前往相关域名提供商购买。<br><del>但是如果你有幸能看到谷歌广告（概率较小），可以考虑点一点。</del></p>
</blockquote>
<!-- > 原本我的确是这么写的。
> 不过咱的确一直嫖的是[腾讯云](https://cloud.tencent.com/act/cps/redirect?redirect=1040&cps_key=598123cb511ac35c74d38b5a49392812&from=console)，而它又有一个[推广链接](https://cloud.tencent.com/act/cps/redirect?redirect=1040&cps_key=598123cb511ac35c74d38b5a49392812&from=console)。
> 而你通过我这个[链接](https://cloud.tencent.com/act/cps/redirect?redirect=1040&cps_key=598123cb511ac35c74d38b5a49392812&from=console)访问腾讯云注册购买产品，也不会多花钱。所以就不妨[点一下](https://cloud.tencent.com/act/cps/redirect?redirect=1040&cps_key=598123cb511ac35c74d38b5a49392812&from=console)？
> 「你看，很简单吧，谁都不会受伤的世界完成了。」——比企谷八幡 -->

<p>并使用 CNAME 解析到 <code>你的名字.github.io</code>。（当然 A 记录直接解析到 GitHub Pages IP 地址也可以。）</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://help.github.com/en/github/working-with-github-pages/managing-a-custom-domain-for-your-github-pages-site#configuring-an-apex-domain">Managing a custom domain for your GitHub Pages site</a></p>
</blockquote>
<p>在 <code>Hexo</code> 工作目录下 <code>source</code> 文件夹下新建 <code>CNAME</code> 文件（没有后缀名）。</p>
<blockquote>
<p>CNAME 即相当于告诉 GitHub 允许将 xxx.github.io 为你的域名提供服务。<br>source 目录下的文件除了特殊的 markdown 会被解析为 html，其余都会原样复制到生成的静态文件夹中。<br>所以你需要在 source 文件夹下建有 CNAME，它会在生成静态文件时，将 CNAME 拷贝到静态文件夹并部署到 master 分支。<br>如果只是在 GitHub 上设置（<code>项目地址页面 -&gt; Settings -&gt; Options -&gt; GitHub Pages -&gt; Custom domain</code>），它会自动添加到 master 分支上，但随后不包含 CNAME 的部署会将其覆盖。</p>
</blockquote>
<p>内容填写你的域名即可。</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://help.github.com/en/github/working-with-github-pages/about-custom-domains-and-github-pages">About custom domains and GitHub Pages</a></p>
</blockquote>
<h3 id="备案"><a href="#备案" class="headerlink" title="备案"></a>备案</h3><p>如果想要使用国内的一些服务，比如 CDN，不备案确实寸步难行。</p>
<p>此处我指的是 ICP 备案，并非公安备案。（实际上我从来没有进行过公安备案，且目前在使用服务时，并未受到任何相关限制。）</p>
<p>国内备案往往意味着你还需要一台国内的服务器，譬如通过腾讯云备案时会需要你设置关联的服务器（阿里云应当也是如此）。<br>实际上你的网站并不一定得在这台服务器上，即便你只是免费试用了一个月，但是备案成功了，之后过期了对备案也不会有何影响。</p>
<blockquote>
<p>也就是说你完全可以使用学生优惠（10 元左右）购买一个月的云服务器，用于关联，并在这个月内抓紧备案好，此后云服务器过期不会影响备案问题。<br>学生优惠的话 <a target="_blank" rel="noopener" href="https://www.aliyun.com/minisite/goods?userCode=ixykjqj2">阿里云</a> 或者 <a target="_blank" rel="noopener" href="https://url.cn/PLQYbz6n">腾讯云</a> 都有。</p>
</blockquote>
<p>备案前需要注意的几点就是：</p>
<ul>
<li>确定你的域名是否可以备案</li>
<li>关闭评论区</li>
<li>提交备案时的备注说明不得含有 <code>交流</code> 字样</li>
<li>首页不能含有其他网站的直达链接</li>
<li>遵纪守法无不良信息（这是当然的）</li>
</ul>
<p>你也可以直接关停网站，等待备案成功后再重新打开。（今后每年偶尔会复查，但相对会宽松许多。）</p>
<p>此后，按照网站指引的备案步骤一步步来即可。（以前还要等待幕布寄送拍照，现在可以直接在手机上人脸验证）</p>
<p>备案成功后页脚必须清晰地展示备案号，且备案号含有指向 <a target="_blank" rel="noopener" href="http://www.beian.miit.gov.cn/">http://www.beian.miit.gov.cn/</a> 的超链接。</p>
<h2 id="源文件备份"><a href="#源文件备份" class="headerlink" title="源文件备份"></a>源文件备份</h2><h3 id="备份什么？"><a href="#备份什么？" class="headerlink" title="备份什么？"></a>备份什么？</h3><p>百密总有一疏，因此我们需要做好博客源文件的备份，你固然可以直接将整个文件夹打包，但当你后续安装的插件越来越多，你会发现压缩或者解压耗时越来越长，实际上我们只需要备份<code>根目录</code>的几个文件（夹）即可，<code>source</code>文件夹（里面存放着你博客的主要资源），<code>_config.yml</code>（HEXO的配置，如果你不升级HEXO的话，这个也是很重要的），然后就是<code>package.json</code>（和它的名字一样，他能告诉你你安装了哪些插件及其对应的版本），有了这些你就能在另外一台电脑上很快恢复你的博客环境（当然我本人采用了<code>Cloud Studio</code>作为临时环境，也是不错的）</p>
<p>我的<code>package.json</code>一览，如果其中一些插件你也有兴趣可以按照插件官方说明尝试，这里不做功能注释，虽然总会踩一些奇奇怪怪的坑，但当你慢慢修正时，虽然很折腾，但的确是乐在其中</p>
<figure class="highlight json"><table><tr><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">&quot;name&quot;</span>: <span class="string">&quot;hexo-site&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;version&quot;</span>: <span class="string">&quot;0.0.0&quot;</span>,</span><br><span class="line">  <span class="attr">&quot;private&quot;</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">    <span class="attr">&quot;build&quot;</span>: <span class="string">&quot;hexo generate&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;clean&quot;</span>: <span class="string">&quot;hexo clean&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;deploy&quot;</span>: <span class="string">&quot;hexo deploy&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;server&quot;</span>: <span class="string">&quot;hexo server&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">&quot;hexo&quot;</span>: &#123;</span><br><span class="line">    <span class="attr">&quot;version&quot;</span>: <span class="string">&quot;5.0.0&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">&quot;dependencies&quot;</span>: &#123;</span><br><span class="line">    <span class="attr">&quot;cheerio&quot;</span>: <span class="string">&quot;^1.0.0-rc.3&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;cnpm&quot;</span>: <span class="string">&quot;^6.1.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;gulp-htmlmin&quot;</span>: <span class="string">&quot;^5.0.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo&quot;</span>: <span class="string">&quot;^5.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-abbrlink&quot;</span>: <span class="string">&quot;^2.2.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-baidu-url-submit&quot;</span>: <span class="string">&quot;0.0.6&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-deployer-git&quot;</span>: <span class="string">&quot;^2.1.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-feed&quot;</span>: <span class="string">&quot;^1.0.2&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-generator-archive&quot;</span>: <span class="string">&quot;^1.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-generator-baidu-sitemap&quot;</span>: <span class="string">&quot;^0.1.9&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-generator-category&quot;</span>: <span class="string">&quot;^1.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-generator-index&quot;</span>: <span class="string">&quot;^1.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-generator-search&quot;</span>: <span class="string">&quot;^2.4.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-generator-sitemap&quot;</span>: <span class="string">&quot;^2.1.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-generator-tag&quot;</span>: <span class="string">&quot;^1.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-render-pug&quot;</span>: <span class="string">&quot;^2.1.4&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-renderer-ejs&quot;</span>: <span class="string">&quot;^1.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-renderer-marked&quot;</span>: <span class="string">&quot;^3.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-renderer-pug&quot;</span>: <span class="string">&quot;^1.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-renderer-stylus&quot;</span>: <span class="string">&quot;^1.1.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-server&quot;</span>: <span class="string">&quot;^1.0.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-tag-aplayer&quot;</span>: <span class="string">&quot;^3.0.4&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;hexo-wordcount&quot;</span>: <span class="string">&quot;^6.0.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;imagemin&quot;</span>: <span class="string">&quot;^7.0.1&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;npm-check&quot;</span>: <span class="string">&quot;^5.9.2&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;terser&quot;</span>: <span class="string">&quot;^4.8.0&quot;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">&quot;devDependencies&quot;</span>: &#123;</span><br><span class="line">    <span class="attr">&quot;gulp&quot;</span>: <span class="string">&quot;^4.0.2&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;gulp-clean-css&quot;</span>: <span class="string">&quot;^4.3.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;gulp-htmlclean&quot;</span>: <span class="string">&quot;^2.7.22&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;gulp-imagemin&quot;</span>: <span class="string">&quot;^7.1.0&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;gulp-uglify&quot;</span>: <span class="string">&quot;^3.0.2&quot;</span>,</span><br><span class="line">    <span class="attr">&quot;workbox-build&quot;</span>: <span class="string">&quot;^5.1.3&quot;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="备份方式"><a href="#备份方式" class="headerlink" title="备份方式"></a>备份方式</h3><p>不能在一棵树上吊死，所以我选择了多平台备份，分别是Github,Gitee,Coding三个平台，多一个平台，多一份保障，这里注册账号实名认证什么的不再赘述，大家应该都会，注意的一点就是我们建的仓库选择**<code>私有仓库</code>**，不然别人把你md一拷走，就成别人的的了，不过大多数人比较自觉，我们这静态博客，F12源码什么的也看的清清楚楚，爬走很简单，主要靠自觉，防止转载（其实无所谓，秉着开源共享的理念，其实标明出处大家也就不会特别在意）</p>
<p>首先在博客<code>根目录</code>使用以下命令初始化本地仓库添加一个远程仓库</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git init</span><br></pre></td></tr></table></figure>

<blockquote>
<p>如果本地未显示.git文件夹，请注意打开显示隐藏文件夹</p>
</blockquote>
<p>然后运行 <code>git remote add &lt;shortname&gt; &lt;url&gt;</code> 添加一个新的远程 Git 仓库，同时指定一个方便使用的简写：</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git remote add &lt;shortname&gt; &lt;url&gt;</span><br></pre></td></tr></table></figure>

<p>比如 <code>git remote add origin git@github.com:CCKNBC/Hexo.git</code>，添加多个仓库地址等更多操作请参考**<a href="%5Bhttps://git-scm.com/book/zh/v2/Git-%E5%9F%BA%E7%A1%80-%E8%BF%9C%E7%A8%8B%E4%BB%93%E5%BA%93%E7%9A%84%E4%BD%BF%E7%94%A8%5D(https://git-scm.com/book/zh/v2/Git-%E5%9F%BA%E7%A1%80-%E8%BF%9C%E7%A8%8B%E4%BB%93%E5%BA%93%E7%9A%84%E4%BD%BF%E7%94%A8)">Git-基础-远程仓库的使用</a>**，按照个人喜好来添加多个仓库地址，我这里全部使用的origin,通过手动添加了coding,gitee的仓库地址，不影响使用就行</p>
<p>然后我们运行<code>git remote -v</code>查看一下结果，是自己想要的即可</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">origin  git@github.com:CCKNBC&#x2F;Hexo.git (fetch)</span><br><span class="line">origin  git@github.com:CCKNBC&#x2F;Hexo.git (push)</span><br><span class="line">origin  git@e.coding.net:ccknbc&#x2F;blog&#x2F;source.git (push)</span><br><span class="line">origin  git@gitee.com:ccknbc&#x2F;blog.git (push)</span><br></pre></td></tr></table></figure>

<p>然后我们就可以推送对应的内容了</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">git pull</span><br><span class="line">git add .</span><br><span class="line">git commit -m <span class="string">&quot;%date% %time%: Updated By CCKNBC Local&quot;</span></span><br><span class="line">git push origin -u</span><br></pre></td></tr></table></figure>

<blockquote>
<p>上面<code>git push origin -u</code>这个是因为第一次推送，我们采取强制推送，如果还是不行我们<code>git push origin -f</code>（因为是第一次无所谓，以后请不要随意使用-f），以后我们只需要<code>git push</code>即可，同时commit的内容请根据实际需要自行修改</p>
</blockquote>
<p>以下是我的<code>.git/config</code>一览,设置好后你可以更换你的第一个url，也就是fetch仓库，根据个人喜好来（或者说网络原因），下面使用的是github的，那么git pull等操作就会按照这个仓库来和本地做比较，选择一个连接比较快的就好</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">[core]</span><br><span class="line">	repositoryformatversion &#x3D; 0</span><br><span class="line">	filemode &#x3D; false</span><br><span class="line">	bare &#x3D; false</span><br><span class="line">	logallrefupdates &#x3D; true</span><br><span class="line">	symlinks &#x3D; false</span><br><span class="line">	ignorecase &#x3D; true</span><br><span class="line">[remote &quot;origin&quot;]</span><br><span class="line">	url &#x3D; git@github.com:CCKNBC&#x2F;Hexo.git</span><br><span class="line">	fetch &#x3D; +refs&#x2F;heads&#x2F;*:refs&#x2F;remotes&#x2F;origin&#x2F;*</span><br><span class="line">	url &#x3D; git@e.coding.net:ccknbc&#x2F;blog&#x2F;source.git</span><br><span class="line">	url &#x3D; git@gitee.com:ccknbc&#x2F;blog.git</span><br><span class="line">[branch &quot;master&quot;]</span><br><span class="line">	remote &#x3D; origin</span><br><span class="line">	merge &#x3D; refs&#x2F;heads&#x2F;master</span><br></pre></td></tr></table></figure>

<p>在上面的添加多个仓库中，个人因为懒的输入命令，所以直接手动添加的下面两行，反正目的达到就行</p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">url = git@e.coding.net:ccknbc/blog/source.git</span><br><span class="line">url = git@gitee.com:ccknbc/blog.git</span><br></pre></td></tr></table></figure>
<p>然后在配置好公钥的情况下，强制推送即可，至此，你的博客源文件已经推送至你的备份仓库，可以去查看是否有一条强制推送的commit记录了，同时检查是否有<code>theme</code>文件夹（因为涉及到后面的魔改，部分源文件修改，因此我们也做好备份），如果没有，检查主题文件夹是否有<code>.git</code>文件夹，删掉后再次推送即可</p>
<h2 id="如何优雅的魔改"><a href="#如何优雅的魔改" class="headerlink" title="如何优雅的魔改"></a>如何优雅的魔改</h2><p>在不动主题源文件方便日后升级的情况下，我们大部分采用外部引入css,js的方式实现，同时上传至github，借用jsDelivr提供的CDN加速服务快速引用</p>
<p>在博客根目录<code>source</code>文件夹下新建一个<code>xxx.js</code>和<code>xxx.css</code>，名字自己取就行，最后我们正确引入即可，在主题配置文件<code>butterfly.yml</code>（下文将直接简写根配（根目录的_confg.yml），主配（主题配置<code>source</code>目录下的butterfly.yml））搜索inject,然后在以下位置插入对应的css和js即可，例如，我是存放在主题文件夹子文件夹css和js内</p>
<figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">inject:</span> </span><br><span class="line">  <span class="attr">head:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;link</span> <span class="string">rel=&quot;stylesheet&quot;</span> <span class="string">href=&quot;https://cdn.jsdelivr.net/gh/CCKNBC/ccknbc.github.io@latest/css/ccknbc.css&quot;&gt;</span></span><br><span class="line">  <span class="attr">bottom:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">&lt;script</span> <span class="string">src=&quot;https://cdn.jsdelivr.net/gh/CCKNBC/ccknbc.github.io@latest/js/ccknbc.js&quot;&gt;&lt;/script&gt;</span></span><br></pre></td></tr></table></figure>

<p>所以按照上面所说的对应的你的链接即为，其中<code>your name</code>是你的github用户名，请注意根据具体路径变通</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">https:&#x2F;&#x2F;cdn.jsdelivr.net&#x2F;gh&#x2F;your name&#x2F;your name.github.io@latest&#x2F;xxx.css</span><br><span class="line">https:&#x2F;&#x2F;cdn.jsdelivr.net&#x2F;gh&#x2F;your name&#x2F;your namec.github.io@latests&#x2F;xxx.js</span><br></pre></td></tr></table></figure>

<p>若是本地预览就可使用（请根据路径自己修改）</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#x2F;css&#x2F;ccknbc.css</span><br><span class="line">&#x2F;js&#x2F;ccknbc.js</span><br></pre></td></tr></table></figure>

<p>接下来分别编辑css和js文件即可，当然你可以直接复制粘贴或者直接引用我的链接</p>
<p><strong><code>css</code></strong></p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="keyword">@font-face</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">&#x27;sleek&#x27;</span>;</span><br><span class="line">    <span class="attribute">src</span>: <span class="built_in">url</span>(<span class="string">&#x27;https://cdn.jsdelivr.net/gh/lete114/CDN2/zaxiang/sleek.woff2&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*标题颜色修改*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-id">#page-header</span> <span class="selector-id">#site_title</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#8FBC8F</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#page-header</span> <span class="selector-id">#site-name</span><span class="selector-class">.blog_title</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#8FBC8F</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 滚动条 */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">::-webkit-scrollbar</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">::-webkit-scrollbar-thumb</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#8FBC8F</span>;</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">-webkit-linear-gradient</span>( <span class="number">45deg</span>, rgba(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.4</span>) <span class="number">25%</span>, transparent <span class="number">25%</span>, transparent <span class="number">50%</span>, <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.4</span>) <span class="number">50%</span>, <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">255</span>, <span class="number">0.4</span>) <span class="number">75%</span>, transparent <span class="number">75%</span>, transparent);</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">2em</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">::-webkit-scrollbar-corner</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: transparent;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">::-moz-selection</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#8FBC8F</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#web_bg</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-webkit-linear-gradient</span>(</span><br><span class="line">      <span class="number">0deg</span>,</span><br><span class="line">      rgba(<span class="number">247</span>, <span class="number">149</span>, <span class="number">51</span>, <span class="number">0.1</span>) <span class="number">0</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">243</span>, <span class="number">112</span>, <span class="number">85</span>, <span class="number">0.1</span>) <span class="number">15%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">239</span>, <span class="number">78</span>, <span class="number">123</span>, <span class="number">0.1</span>) <span class="number">30%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">161</span>, <span class="number">102</span>, <span class="number">171</span>, <span class="number">0.1</span>) <span class="number">44%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">80</span>, <span class="number">115</span>, <span class="number">184</span>, <span class="number">0.1</span>) <span class="number">58%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">16</span>, <span class="number">152</span>, <span class="number">173</span>, <span class="number">0.1</span>) <span class="number">72%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">7</span>, <span class="number">179</span>, <span class="number">155</span>, <span class="number">0.1</span>) <span class="number">86%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">109</span>, <span class="number">186</span>, <span class="number">130</span>, <span class="number">0.1</span>) <span class="number">100%</span></span><br><span class="line">    );</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-moz-linear-gradient</span>(</span><br><span class="line">      <span class="number">0deg</span>,</span><br><span class="line">      rgba(<span class="number">247</span>, <span class="number">149</span>, <span class="number">51</span>, <span class="number">0.1</span>) <span class="number">0</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">243</span>, <span class="number">112</span>, <span class="number">85</span>, <span class="number">0.1</span>) <span class="number">15%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">239</span>, <span class="number">78</span>, <span class="number">123</span>, <span class="number">0.1</span>) <span class="number">30%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">161</span>, <span class="number">102</span>, <span class="number">171</span>, <span class="number">0.1</span>) <span class="number">44%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">80</span>, <span class="number">115</span>, <span class="number">184</span>, <span class="number">0.1</span>) <span class="number">58%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">16</span>, <span class="number">152</span>, <span class="number">173</span>, <span class="number">0.1</span>) <span class="number">72%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">7</span>, <span class="number">179</span>, <span class="number">155</span>, <span class="number">0.1</span>) <span class="number">86%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">109</span>, <span class="number">186</span>, <span class="number">130</span>, <span class="number">0.1</span>) <span class="number">100%</span></span><br><span class="line">    );</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-o-linear-gradient</span>(</span><br><span class="line">      <span class="number">0deg</span>,</span><br><span class="line">      rgba(<span class="number">247</span>, <span class="number">149</span>, <span class="number">51</span>, <span class="number">0.1</span>) <span class="number">0</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">243</span>, <span class="number">112</span>, <span class="number">85</span>, <span class="number">0.1</span>) <span class="number">15%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">239</span>, <span class="number">78</span>, <span class="number">123</span>, <span class="number">0.1</span>) <span class="number">30%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">161</span>, <span class="number">102</span>, <span class="number">171</span>, <span class="number">0.1</span>) <span class="number">44%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">80</span>, <span class="number">115</span>, <span class="number">184</span>, <span class="number">0.1</span>) <span class="number">58%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">16</span>, <span class="number">152</span>, <span class="number">173</span>, <span class="number">0.1</span>) <span class="number">72%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">7</span>, <span class="number">179</span>, <span class="number">155</span>, <span class="number">0.1</span>) <span class="number">86%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">109</span>, <span class="number">186</span>, <span class="number">130</span>, <span class="number">0.1</span>) <span class="number">100%</span></span><br><span class="line">    );</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">-ms-linear-gradient</span>(</span><br><span class="line">      <span class="number">0deg</span>,</span><br><span class="line">      rgba(<span class="number">247</span>, <span class="number">149</span>, <span class="number">51</span>, <span class="number">0.1</span>) <span class="number">0</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">243</span>, <span class="number">112</span>, <span class="number">85</span>, <span class="number">0.1</span>) <span class="number">15%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">239</span>, <span class="number">78</span>, <span class="number">123</span>, <span class="number">0.1</span>) <span class="number">30%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">161</span>, <span class="number">102</span>, <span class="number">171</span>, <span class="number">0.1</span>) <span class="number">44%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">80</span>, <span class="number">115</span>, <span class="number">184</span>, <span class="number">0.1</span>) <span class="number">58%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">16</span>, <span class="number">152</span>, <span class="number">173</span>, <span class="number">0.1</span>) <span class="number">72%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">7</span>, <span class="number">179</span>, <span class="number">155</span>, <span class="number">0.1</span>) <span class="number">86%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">109</span>, <span class="number">186</span>, <span class="number">130</span>, <span class="number">0.1</span>) <span class="number">100%</span></span><br><span class="line">    );</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(</span><br><span class="line">      <span class="number">90deg</span>,</span><br><span class="line">      rgba(<span class="number">247</span>, <span class="number">149</span>, <span class="number">51</span>, <span class="number">0.1</span>) <span class="number">0</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">243</span>, <span class="number">112</span>, <span class="number">85</span>, <span class="number">0.1</span>) <span class="number">15%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">239</span>, <span class="number">78</span>, <span class="number">123</span>, <span class="number">0.1</span>) <span class="number">30%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">161</span>, <span class="number">102</span>, <span class="number">171</span>, <span class="number">0.1</span>) <span class="number">44%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">80</span>, <span class="number">115</span>, <span class="number">184</span>, <span class="number">0.1</span>) <span class="number">58%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">16</span>, <span class="number">152</span>, <span class="number">173</span>, <span class="number">0.1</span>) <span class="number">72%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">7</span>, <span class="number">179</span>, <span class="number">155</span>, <span class="number">0.1</span>) <span class="number">86%</span>,</span><br><span class="line">      <span class="built_in">rgba</span>(<span class="number">109</span>, <span class="number">186</span>, <span class="number">130</span>, <span class="number">0.1</span>) <span class="number">100%</span></span><br><span class="line">    );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="selector-class">.layout_post</span>&gt;<span class="selector-id">#post</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>,.<span class="number">0</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 鼠标图标 */</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">    <span class="attribute">cursor</span>: <span class="built_in">url</span>(https://cdn.jsdelivr.net/gh/lete114/CDN@<span class="number">1.0</span>/Use/Jkll8I.png), auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*a标签*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">cursor</span>: <span class="built_in">url</span>(https://cdn.jsdelivr.net/gh/lete114/CDN@<span class="number">1.0</span>/Use/JkuClT.png), auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*按钮*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">button</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">cursor</span>: <span class="built_in">url</span>(https://cdn.jsdelivr.net/gh/lete114/CDN@<span class="number">1.0</span>/Use/JkuClT.png), auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*i标签*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">i</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">cursor</span>: <span class="built_in">url</span>(https://cdn.jsdelivr.net/gh/lete114/CDN@<span class="number">1.0</span>/Use/JkuClT.png), auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*页脚a标签*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* #footer-wrap a:hover &#123;</span></span><br><span class="line"><span class="comment">    text-decoration: none;</span></span><br><span class="line"><span class="comment">    cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;</span></span><br><span class="line"><span class="comment">&#125; */</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*分页器*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-id">#pagination</span> <span class="selector-class">.page-number</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">cursor</span>: <span class="built_in">url</span>(https://cdn.jsdelivr.net/gh/lete114/CDN@<span class="number">1.0</span>/Use/JkuClT.png), auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*头部的导航栏*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-id">#nav</span> <span class="selector-class">.site-page</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">cursor</span>: <span class="built_in">url</span>(https://cdn.jsdelivr.net/gh/lete114/CDN@<span class="number">1.0</span>/Use/JkuClT.png), auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* a(链接)标签的默认颜色 */</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 宽度大于800小于9999执行 */</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* @media only screen and (min-width: 800px) and (max-width: 9999px) &#123;</span></span><br><span class="line"><span class="comment">    </span></span><br><span class="line"><span class="comment">    #article-container a &#123;</span></span><br><span class="line"><span class="comment">        color: #00c4b6;</span></span><br><span class="line"><span class="comment">        display: inline-block;</span></span><br><span class="line"><span class="comment">        position: relative;</span></span><br><span class="line"><span class="comment">    &#125;</span></span><br><span class="line"><span class="comment">&#125; */</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 打造效果渐变 */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">@-webkit-keyframes</span> Gradient &#123;</span><br><span class="line">    0% &#123;</span><br><span class="line">        <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    50% &#123;</span><br><span class="line">        <span class="attribute">background-position</span>: <span class="number">100%</span> <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    100% &#123;</span><br><span class="line">        <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@-moz-keyframes</span> Gradient &#123;</span><br><span class="line">    0% &#123;</span><br><span class="line">        <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    50% &#123;</span><br><span class="line">        <span class="attribute">background-position</span>: <span class="number">100%</span> <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    100% &#123;</span><br><span class="line">        <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">@keyframes</span> Gradient &#123;</span><br><span class="line">    0% &#123;</span><br><span class="line">        <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    50% &#123;</span><br><span class="line">        <span class="attribute">background-position</span>: <span class="number">100%</span> <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    100% &#123;</span><br><span class="line">        <span class="attribute">background-position</span>: <span class="number">0</span> <span class="number">50%</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#subtitle</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">linear-gradient</span>(-<span class="number">45deg</span>, #ffecd2, #fcb69f, #<span class="number">84</span>fab0, #<span class="number">8</span>fd3f4,#fddb92,#d1fdff,#e4afcb,#<span class="number">7</span>edbdc,#eea2a2,#<span class="number">7</span>ac5d8);</span><br><span class="line">    <span class="attribute">background-size</span>: <span class="number">400%</span> <span class="number">400%</span>;</span><br><span class="line">    <span class="attribute">-webkit-animation</span>: Gradient <span class="number">10s</span> ease infinite;</span><br><span class="line">    <span class="attribute">-moz-animation</span>: Gradient <span class="number">10s</span> ease infinite;</span><br><span class="line">    <span class="attribute">animation</span>: Gradient <span class="number">10s</span> ease infinite;</span><br><span class="line">    <span class="attribute">-o-user-select</span>: none;</span><br><span class="line">    <span class="attribute">-ms-user-select</span>: none;</span><br><span class="line">    <span class="attribute">-webkit-user-select</span>: none;</span><br><span class="line">    <span class="attribute">-moz-user-select</span>: none;</span><br><span class="line">    <span class="attribute">user-select</span>: none;</span><br><span class="line">    <span class="attribute">-webkit-background-clip</span>: text;</span><br><span class="line">    <span class="attribute">-webkit-text-fill-color</span>: transparent;</span><br><span class="line">    <span class="attribute">border-top-left-radius</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">border-top-right-radius</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#subtitle</span><span class="selector-pseudo">:before</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong><code>js</code></strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 设置页脚博主会动的心</span></span><br><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    $(<span class="string">&#x27;.copyright&#x27;</span>).html(<span class="string">&#x27;©2020 &lt;i style=&quot;color:#49B1F5;animation: announ_animation 0.8s linear infinite;&quot; class=&quot;fa fa-heartbeat&quot;&gt;&lt;/i&gt; CC康纳百川&#x27;</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>(aidaori())&#123;</span><br><span class="line">    $(<span class="string">&quot;html&quot;</span>).css(&#123;</span><br><span class="line">        <span class="string">&quot;filter&quot;</span>:<span class="string">&quot;gray !important&quot;</span>,</span><br><span class="line">        <span class="string">&quot;filter&quot;</span>:<span class="string">&quot;progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)&quot;</span>,</span><br><span class="line">        <span class="string">&quot;filter&quot;</span>:<span class="string">&quot;grayscale(100%)&quot;</span>,</span><br><span class="line">        <span class="string">&quot;-webkit-filter&quot;</span>:<span class="string">&quot;grayscale(100%)&quot;</span>,</span><br><span class="line">        <span class="string">&quot;-moz-filter&quot;</span>:<span class="string">&quot;grayscale(100%)&quot;</span>,</span><br><span class="line">        <span class="string">&quot;-ms-filter&quot;</span>:<span class="string">&quot;grayscale(100%)&quot;</span>,</span><br><span class="line">        <span class="string">&quot;-o-filter&quot;</span>:<span class="string">&quot;grayscale(100%)&quot;</span> </span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//在特定日期变灰</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">aidaori</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> aidaoriarr=<span class="keyword">new</span> <span class="built_in">Array</span>(<span class="string">&quot;0403&quot;</span>,<span class="string">&quot;0404&quot;</span>,<span class="string">&quot;0405&quot;</span>,<span class="string">&quot;0406&quot;</span>,<span class="string">&quot;0414&quot;</span>,<span class="string">&quot;0512&quot;</span>,<span class="string">&quot;0807&quot;</span>,<span class="string">&quot;0909&quot;</span>,<span class="string">&quot;1213&quot;</span>);</span><br><span class="line">    <span class="comment">//2020年4月4日 新冠肺炎哀悼日，清明节</span></span><br><span class="line">    <span class="comment">//2010年4月14日，青海玉树地震</span></span><br><span class="line">    <span class="comment">//2008年5月12日，四川汶川地震</span></span><br><span class="line">    <span class="comment">//2010年8月7日，甘肃舟曲特大泥石流</span></span><br><span class="line">    <span class="comment">//1976年9月9日，毛泽东逝世</span></span><br><span class="line">    <span class="comment">//1937年12月13日，南京大屠杀</span></span><br><span class="line">    <span class="keyword">var</span> mydate = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line">    <span class="keyword">var</span> str = <span class="string">&quot;&quot;</span>;<span class="comment">// + mydate.getFullYear();</span></span><br><span class="line">    <span class="keyword">var</span> mm = mydate.getMonth()+<span class="number">1</span>;</span><br><span class="line">    <span class="keyword">if</span>(mydate.getMonth()&gt;<span class="number">9</span>)&#123;</span><br><span class="line">      str += mm;</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      str += <span class="string">&quot;0&quot;</span> + mm;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span>(mydate.getDate()&gt;<span class="number">9</span>)&#123;</span><br><span class="line">      str += mydate.getDate();</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      str += <span class="string">&quot;0&quot;</span> + mydate.getDate();</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span>(aidaoriarr.indexOf(str)&gt;<span class="number">-1</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 可爱的Title</span></span><br><span class="line"><span class="keyword">var</span> OriginTitle = <span class="built_in">document</span>.title;</span><br><span class="line"><span class="keyword">var</span> titleTime;</span><br><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">&#x27;visibilitychange&#x27;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">document</span>.hidden) &#123;</span><br><span class="line">        $(<span class="string">&#x27;[rel=&quot;icon&quot;]&#x27;</span>).attr(<span class="string">&#x27;href&#x27;</span>, <span class="string">&quot;https://cdn.jsdelivr.net/gh/CCKNBC/CDN/logo/ccknbc.png&quot;</span>);</span><br><span class="line">        <span class="built_in">document</span>.title = <span class="string">&#x27;(つェ⊂) 我藏好了哦~~&#x27;</span>;</span><br><span class="line">        <span class="built_in">clearTimeout</span>(titleTime);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        $(<span class="string">&#x27;[rel=&quot;icon&quot;]&#x27;</span>).attr(<span class="string">&#x27;href&#x27;</span>, <span class="string">&quot;https://cdn.jsdelivr.net/gh/CCKNBC/CDN/logo/favicon.svg&quot;</span>);</span><br><span class="line">        <span class="built_in">document</span>.title = <span class="string">&#x27;(*´∇｀*) 被你发现啦~~&#x27;</span> + OriginTitle;</span><br><span class="line">        titleTime = <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="built_in">document</span>.title = OriginTitle;</span><br><span class="line">        &#125;, <span class="number">2000</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>更多类容可以百度，自己DIY，有想法当然要实现啊</p>
<hr>
<h2 id="未完待续…"><a href="#未完待续…" class="headerlink" title="未完待续…"></a>未完待续…</h2></div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong>CC</li><li class="post-copyright-link"><strong>本文链接：</strong><a href="https://ccknbc.github.io/yun/posts/3/" title="HEXO折腾">https://ccknbc.github.io/yun/posts/3/</a></li><li class="post-copyright-license"><strong>版权声明：</strong>本博客所有文章除特别声明外，均默认采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener" title="CC BY-NC-SA 4.0 "><svg class="icon"><use xlink:href="#icon-creative-commons-line"></use></svg><svg class="icon"><use xlink:href="#icon-creative-commons-by-line"></use></svg><svg class="icon"><use xlink:href="#icon-creative-commons-nc-line"></use></svg><svg class="icon"><use xlink:href="#icon-creative-commons-sa-line"></use></svg></a> 许可协议。</li></ul><script>document.addEventListener('copy', function (event) {
  const clipboardData = event.clipboardData || window.clipboardData;
  if (!clipboardData) { return; }
  const text = window.getSelection().toString();
  if (text) {
    event.preventDefault();
    clipboardData.setData('text/plain', text + '\n\n本文作者：CC\n本文链接：https://ccknbc.github.io/yun/posts/3/\n版权声明：本博客所有文章除特别声明外，均默认采用 CC BY-NC-SA 4.0 许可协议。');
  }
});</script></section></article><div class="post-nav"><div class="post-nav-item"><a class="post-nav-prev" href="/yun/posts/4/" rel="prev" title="简单浏览器更新推送的实现"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-arrow-left-s-line"></use></svg><span class="post-nav-text">简单浏览器更新推送的实现</span></a></div><div class="post-nav-item"><a class="post-nav-next" href="/yun/posts/2/" rel="next" title="生产实习"><span class="post-nav-text">生产实习</span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-arrow-right-s-line"></use></svg></a></div></div></div><div id="comment"><div class="comment-tooltip text-center"><span>点击按钮跳转 GitHub Issues 评论</span><br><span>若没有本文 Issue，您可以使用 Comment 模版新建</span><br><a class="hty-button hty-button--raised" id="github-issues" target="_blank" rel="noopener" href="https://github.com/ccknbc-backup/comments/issues?q=is:issue+HEXO折腾">GitHub Issues</a></div><div id="disqus_thread"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/disqusjs@latest/dist/disqusjs.css"><script src="https://cdn.jsdelivr.net/npm/disqusjs@latest/dist/disqus.js"></script><script>const disqusjsConfig = {"enable":true,"shortname":"ccknbc","count":true,"apikey":"Z6F8Gc9KvW2YCh6p11VRVNvMBYfdaKR3IMRFLVmoYaIQJ2ysp38fZ9tivPdgyBWu","siteName":"CC的部落格","identifier":null,"url":null,"title":null,"nesting":4,"nocomment":"这里冷冷清清的，一条评论也没有，快来留下脚印吧！","admin":"ccknbc","adminLabel":"ccknbc"}
function loadDisqus() {
  const dsqjs = new DisqusJS(disqusjsConfig)
}</script><script src="/yun/js/comments/disqus.js"></script><style>.utterances {
  max-width: 100%;
}</style><script src="https://utteranc.es/client.js" repo="ccknbc-backup/comments" issue-term="title" label="💬comment" theme="github-light" crossorigin="anonymous" async></script></div></main><footer class="sidebar-translate" id="footer"><div class="copyright"><span>&copy; 2020 </span><span class="with-love" id="animate"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-cloud-line"></use></svg></span><span class="author"> CC康纳百川</span></div><div class="powered"><span>由 <a href="https://hexo.io" target="_blank" rel="noopener">Hexo</a> 驱动 v5.2.0</span><span class="footer-separator">|</span><span>主题 - <a rel="noopener" href="https://github.com/YunYouJun/hexo-theme-yun" target="_blank"><span>Yun</span></a> v1.2.0</span></div><div class="live_time"><span>本博客已萌萌哒地运行</span><span id="display_live_time"></span><span class="moe-text">(●'◡'●)</span><script>function blog_live_time() {
  window.setTimeout(blog_live_time, 1000);
  const start = new Date('2020-06-04T00:00:00');
  const now = new Date();
  const timeDiff = (now.getTime() - start.getTime());
  const msPerMinute = 60 * 1000;
  const msPerHour = 60 * msPerMinute;
  const msPerDay = 24 * msPerHour;
  const passDay = Math.floor(timeDiff / msPerDay);
  const passHour = Math.floor((timeDiff % msPerDay) / 60 / 60 / 1000);
  const passMinute = Math.floor((timeDiff % msPerHour) / 60 / 1000);
  const passSecond = Math.floor((timeDiff % msPerMinute) / 1000);
  display_live_time.innerHTML = " " + passDay + " 天 " + passHour + " 小时 " + passMinute + " 分 " + passSecond + " 秒";
}
blog_live_time();
</script></div><div id="busuanzi"><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span id="busuanzi_container_site_uv" title="总访客量"><span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-user-line"></use></svg></span><span id="busuanzi_value_site_uv"></span></span><span class="footer-separator">|</span><span id="busuanzi_container_site_pv" title="总访问量"><span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-eye-line"></use></svg></span><span id="busuanzi_value_site_pv"></span></span></div></footer><a class="hty-icon-button" id="goUp" aria-label="back-to-top" href="#"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-arrow-up-s-line"></use></svg><svg class="progress-circle-container" viewBox="0 0 100 100"><circle class="progress-circle" id="progressCircle" cx="50" cy="50" r="48" fill="none" stroke="#0078E7" stroke-width="2" stroke-linecap="round"></circle></svg></a><a class="popup-trigger hty-icon-button icon-search" id="search" href="javascript:;" title="搜索"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-search-line"></use></svg></span></a><script>window.addEventListener("DOMContentLoaded", () => {
  // Handle and trigger popup window
  document.querySelector(".popup-trigger").addEventListener("click", () => {
    document.querySelector(".popup").classList.add("show");
    setTimeout(() => {
      document.querySelector(".search-input").focus();
    }, 100);
  });

  // Monitor main search box
  const onPopupClose = () => {
    document.querySelector(".popup").classList.remove("show");
  };

  document.querySelector(".popup-btn-close").addEventListener("click", () => {
    onPopupClose();
  });

  window.addEventListener("keyup", event => {
    if (event.key === "Escape") {
      onPopupClose();
    }
  });
});
</script><script src="/yun/js/search/local-search.js" defer></script><div class="popup search-popup"><div class="search-header"><span class="popup-btn-close close-icon hty-icon-button"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-close-line"></use></svg></span></div><div class="search-input-container"><input class="search-input" id="local-search-input" type="text" placeholder="搜索..." value=""></div><div id="local-search-result"></div></div><script>const date = new Date();
const today = (date.getMonth() + 1) + "-" + date.getDate()
const mourn_days = ["4-4","9-18"]
if (mourn_days.includes(today)) {
  document.documentElement.style.filter = "grayscale(1)";
}</script></div><script defer src="/yun/js/utils.js"></script><script defer src="/yun/js/hexo-theme-yun.js"></script></body></html>